<template>
  <div class="cate">
    <!-- 面包屑导航栏 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>
        <a href="/hello">首页</a>
      </el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡牌试图区域 -->
    <el-card>
      <!-- 顶部添加分类 -->
      <el-row>
        <el-col>
          <el-button @click="addGoods" type="primary">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- vue-table-with-tree-grid -->
      <tree-table
        show-index
        border
        :show-row-hover="false"
        index-text="#"
        :expand-type="false"
        :data="goodsList"
        :columns="columns"
        :selection-type="false"
      >
        <!-- 是否有效 -->
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-success" style="color:#67c23a" v-if="scope.row.cat_deleted===false"></i>
          <i class="el-icon-error" style="color:#f56c6c" v-else></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
          <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
          <el-tag size="mini" type="warning" v-else>三级</el-tag>
        </template>
        <template slot="edit" slot-scope="scope">
          <el-button @click="etidGoods(scope.row)" type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          <el-button
            @click="removeItem(scope.row)"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
        <!-- 编辑 -->
      </tree-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3 ,5, 10,15]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 分类主体 -->
    </el-card>
    <!-- 添加分类 -->
    <el-dialog
      @close="removeGoodsRules"
      title="添加分类"
      :visible.sync="addGoodsDialogVisible"
      width="50%"
    >
      <!-- 添加表单form -->
      <el-form ref="addGoodsform" :rules="addGoodsrules" :model="addGoodsform" label-width="80px">
        <!-- 分类名称 -->
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="addGoodsform.cat_name"></el-input>
        </el-form-item>
        <!-- 父级分类 -->
        <el-form-item label="父级分类">
          <el-cascader
            v-model="getGoodsCateID"
            :options="goodsCateList"
            :props="props"
            @change="handleGoodsCateChange"
            clearable
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addGoodsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confimAddGoods">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑分类 -->
    <el-dialog @close="editRemoveRules" title="编辑分类" :visible.sync="deitDialogVisible" width="50%">
      <!-- 编辑form -->
      <el-form ref="editGoodsForm" :rules="editGoodsRules" :model="editForm" label-width="80px">
        <el-form-item label="活动名称" prop="cat_name">
          <el-input v-model="editForm.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deitConfig">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除分类 -->
  </div>
</template>

<script>
import { getUserInfo, GetFather, AddGoods, EditGoods, RemoveGoodsCate } from '@/api/api.js'
export default {
  name: 'BackShopCate',
  data () {
    return {
      // 商品分类数据
      goodsList: [],
      // 请求参数
      queryInfo: {
        type: 3,
        pagenum: 0,
        pagesize: 5,
      },
      total: 0,
      // 树状的每一项
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name'
        },
        {
          label: '是否有效',
          type: 'template',
          template: 'isOk'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '编辑',
          type: 'template',
          template: 'edit'
        },
      ],
      // 添加分类show
      addGoodsDialogVisible: false,
      // 添加商品表单
      addGoodsform: {
        // 添加的name
        cat_name: '',
        // 分类父id
        cat_pid: 0,
        // 分类层级
        cat_level: 0
      },
      // 添加商品正则
      addGoodsrules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
      // 父级商品分类
      goodsCateList: [],
      // 复选框被选中的id
      getGoodsCateID: [],
      // 添加分类自定义
      props: {
        expandTrigger: 'hover',
        checkStrictly: true,
        value: 'cat_id',
        label: 'cat_name',
        children: 'children'
      },
      // 编辑show
      deitDialogVisible: false,
      // 编辑form
      editForm: {
        cat_name: '',
        tableCurrentId: ''
      },
      // 编辑正则
      editGoodsRules: {
        cat_name: [
          { required: true, message: '请输入分类名称', trigger: 'blur' },
        ],
      },
    };
  },

  created () {
    this.getGoodsList()
  },

  methods: {
    // 请求商品分类数据
    async getGoodsList () {
      const { data: res } = await getUserInfo({ params: this.queryInfo });
      if (res.meta.status !== 200) return this.$message.error('获取商品分类失败！');
      this.goodsList = res.data.result;
      this.total = res.data.total
    },
    // 改变每一页数据条
    handleSizeChange (newSize) {
      // this.pageSize
      this.queryInfo.pagesize = newSize;
      this.getGoodsList()
    },
    // 改变条数
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage;
      this.getGoodsList()
    },
    // 添加分类
    addGoods () {
      // 显示同时获取父元素列表
      this.getParentList()
      this.addGoodsDialogVisible = true;
    },
    // 获取父级分类列表
    async getParentList () {
      // { params: { type: 2 } }
      // type 2 等于 指获取第二级别分类
      const { data: res } = await GetFather({ params: { type: 2 } });
      if (res.meta.status !== 200) return this.$message.error('获取父级商品信息失败')
      this.goodsCateList = res.data
    },
    // 获取改变之后的值
    handleGoodsCateChange () {
      // 判断添加的是几级分类
      const len = this.getGoodsCateID.length;
      if (len > 0) {
        this.addGoodsform.cat_pid = this.getGoodsCateID[len - 1]
        this.addGoodsform.cat_level = this.getGoodsCateID.length
        return
      } else {
        this.addGoodsform.cat_pid = 0;
        this.addGoodsform.cat_level = 0;
      }
    },
    // 关闭清除form内容
    removeGoodsRules () {
      this.$refs.addGoodsform.resetFields();
      this.addGoodsform.cat_pid = 0;
      this.addGoodsform.cat_level = 0;
      this.getGoodsCateID = []
    },
    // 添加商品
    confimAddGoods () {
      this.$refs.addGoodsform.validate(async validate => {
        if (!validate) return
        const { data: res } = await AddGoods(this.addGoodsform)
        if (res.meta.status !== 201) return this.$message.error('添加商品失败')
        this.$message.success('添加商品成功')
        this.addGoodsDialogVisible = false;
        // 添加成功重新请求数据
        this.getGoodsList()
      })
    },
    // 编辑分类
    etidGoods (row) {
      this.deitDialogVisible = true;
      this.editForm.tableCurrentId = row.cat_id;
      this.editForm.cat_name = row.cat_name;
    },
    // 确认提交
    deitConfig () {
      this.$refs.editGoodsForm.validate(async validate => {
        if (!validate) return
        const { data: res } = await EditGoods(this.editForm.tableCurrentId, { cat_name: this.editForm.cat_name })
        if (res.meta.status !== 200) return this.$message.error('编辑失败')
        this.$message.success('编辑成功')
        this.deitDialogVisible = false;
        this.getGoodsList()
      })
    },
    // 清除编辑正则
    editRemoveRules () {
      this.$refs.editGoodsForm.resetFields()
    },
    // 删除当前的分类名称
    async removeItem (row) {
      // console.log(row);
      const relust = await this.$messageBox('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err);
      if (relust !== 'confirm') return this.$message.info('取消删除')
      const { data: res } = await RemoveGoodsCate(row.cat_id)
      if (res.meta.status !== 200) this.$message.error('删除失败')
      this.getGoodsList()
      this.$message.success('删除成功')
    }
  },
};
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-cascader {
  width: 100%;
}
</style>